<template>
	<view>
		<uamhead :title="title"></uamhead>
			<scroll-view scroll-y="true" >
				<view class="search">
					<uni-search-bar v-model="keyword" @confirm="confirm" @input="input"  />	
				</view>
				<template v-if="searchingStatus ==='default'" >
					<view class="hot">
						<view class="title">热搜榜</view>
						<view class="item" v-for="(item,index) in searchHot" :key="index" @tap="handleToWord(item.searchWord)">
							<view class="top">{{ index + 1 }}</view>
							<view class="word">
								<view>
									{{ item.searchWord }} <image :src="item.iconType ? item.iconUrl : ''" mode="aspectFit"></image>
								</view>
								<view>{{ item.content }}</view>
							</view>
							<text class="count">{{ item.score }}</text>
						</view>
					</view>
				</template>
				<template v-else-if="searchingStatus ==='result'" >
					<view>搜索结果</view>
				</template>
			</scroll-view>
	</view>
</template>

<script>
	import { searchHot,searchWord ,searchSuggest} from '../../common/api.js'
	export default {
		data() {
			return {
				title:'搜索页',
				searchHot : [],
				keyword:'想听什么歌呢？',
				searchingStatus:'default',
				searchHot:[],
				searchList:[],
				suggestWord:[],
				historyList:[]
			}
		},
		onLoad() {
			searchHot().then((res)=>{
				if(res.data.code == '200'){
					this.searchHot = res.data.data;
				}
			});
			uni.getStorage({
				key: 'searchHistory',
				success:(res)=>{
					this.historyList = res.data;
					console.log(this.historyList)
				}
			});
		},
		methods: {
			handleToWord(searchWord){
				this.keyword = searchWord;
			},
			input(){
				this.searchingStatus='searching...'
				let word=this.keyword
				var arr=[]
				searchSuggest(word).then(res=>{
					arr=res.data.result.allMatch.map((item,index)=>{return item.keyword})
					this.suggestWord=arr
					console.log(this.suggestWord)
				})
			},
			confirm(){
				this.searchingStatus='result'
				searchWord(this.keyword).then((res)=>{
					if(res.data.code == '200'){
						this.searchList = res.data.result.songs;
					}
					// console.log(this.searchList)
					this.historyList.unshift(this.keyword);
					this.historyList = [...new Set(this.historyList)];
					if(this.historyList.length > 10){
						this.historyList.length = 10;
					}
					uni.setStorage({
						key: 'searchHistory',
						data: this.historyList
					})
					console.log(this.historyList)
				})				
			}
		}
	}
</script>

<style>
	.search{ display: flex; background:#f7f7f7; height:73rpx; margin:28rpx 30rpx 30rpx 30rpx; border-radius: 50rpx; align-items: center;}
	.search text{ margin:0 27rpx;} 
	.search input{ font-size:26rpx; flex:1;}
	
	.hot{ margin:30rpx 30rpx; font-size:26rpx; color:#bebebe;}
	.hot .title{}
	.hot .item{ display: flex; align-items: center; margin-top: 40rpx;}
	.hot .top{ width:60rpx; color:#fb2221; font-size:34rpx;}
	.hot .word{ flex:1;}
	.hot .word view:nth-child(1){ font-size:36rpx; color:black;}
	.hot .word image{ width:48rpx; height:22rpx;}
	.hot .count{}
</style>
